<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历： 用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		    children()         功能：获取匹配元素集合中每个元素的子元素
			parent()           功能：获取匹配元素集合中每个元素的父元素
		 
		    siblings()         功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		    next()             功能：获取匹配元素集合中每个元素的下一个兄弟元素
		    prev()             功能：获取匹配元素集合中每个元素的上一个兄弟元素
			
		    each()             功能：遍历匹配元素的集合--遍历所有子元素
			                   语法糖：each(function(index,element){
								   $(element).text(`${index}`)
								   注意：打印便利的值，不可以使用单双引号+拼接
								   功能：获取到的元素，遍历元素内容
							   })
							      index:下标  element：元素  形参
		 -->
		 <style>
			 .container{
				 border: 1px solid #1e1e2e;
				 padding: 10px;
				 margin: 10px;
			 }
			 .box{
				 background-color: #00ffff;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				 margin: 5px;
			 }
						
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		<script>
		/*1.点击 获取子元素 按钮  实现.container下所有子元素添加背景色*/	
			$("#gc").click(function(){
				//通过父找子 函数--添加效果
				$(".container").children().css("background-color","#e1e");
			});
		/*2.点击 获取父元素 按钮  实现.container 添加背景色*/
			$("#gp").click(function(){
					   $("#box1").parent().css("background-color","#ffff7f");
			});
		/*3.点击 获取兄弟元素 按钮  实现除了#box4 字体颜色不变，其他变色*/
		$("#gs").click(function(){
			$("#box4").siblings().css("color","#55aa7f");
		});
		/*4.点击 获取下一个兄弟元素 按钮  实现#box4 下一个兄弟，添加背景色*/
		$("#gn").click(function(){
			$("#box4").next().css("background-color","#aa0000");
		});
		/*5.点击 获取上一个兄弟元素 按钮  实现#box6 上一个兄弟，添加效果
		                                         圆、背景图、背景色、盒子阴影
		*/
	   $("#gr").click(function(){
	   	$("#box6").prev().css(  {"width":"100px",
		                         "height":"100px",
		                       "border-radius":"50%",
	   	                      "background-color":"#1e1e2e",
	   						   "box-shadow":"5px 5px 10px #ff0",
							   "font-size":"0"
							  
	   });
	   });
	   /*6.点击 遍历元素  按钮   实现每个盒子上，这是第几个盒子*/
	   $("#loop").click(function(){
		   //通过.box 抓到6个元素【一组集合】
		   $(".box").each(function(i,e){ //e 代表6个元素  i 代表下标
			   //每个盒子加文字：这是第几个盒子
			   $(e).text(`这是第${i+1}盒子`);
		   });
	   });
	   
	   
		</script>
	</body>
</html>